<template>
         <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
       
        class="demo-ruleForm"
        >
        <el-row type="flex" justify="center">
        <el-col :span="5">
            <el-form-item prop="username">
            <el-input  type="text" placeholder="请输入用户名" required="required" v-model="ruleForm.username" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
        </el-col>
        </el-row>

        <el-row type="flex" justify="center">
        <el-col :span="5">
            <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="ruleForm.password"></el-input>
            </el-form-item>
        </el-col>
        </el-row>

        <el-row type="flex" justify="center">
        <el-col :span="5">
            <el-form-item prop="code">
            <el-input type="text" placeholder="请输入验证码"  v-model="ruleForm.checkcode"></el-input>
            
            </el-form-item>
        </el-col><!-- 引入图片 -->
            <el-image :src="url" @click="changCode"></el-image>
        </el-row>

        <el-row type="flex" justify="center">
        <el-col :span="5">
            <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
        </el-col>
        </el-row>
    </el-form>
   
</template>

<script>
import axios from 'axios'
 export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password: '',
          code:''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]

        },
        // 验证码地址
        url: "/user/checkCodeServlet"
      };
    },
    methods: {
      //修改验证码
      changCode(){
        //点击换图
        this.url="/user/checkCodeServlet?t="+new Date().getTime();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //TODO:向后台发送异步请求，携带请求数据完成登录
            let url="/user/loginServlet";
            //2.定义变量保存向后端发送的请求数据
            let params=`username=${this.ruleForm.username}&pwd=${this.ruleForm.password}&code=${this.ruleForm.checkcode}`;
             //3.发送异步请求
             axios.post(url,params)
                  .then(resp=>{
                    //console.log(resp.data);
                    if(resp.data){
                      location.href="#/success";
                    }else if(resp.data===0){
                      this.$message.error('验证码错误');
                    }else{
                      this.$message.error('用户名或者密码错误');
                    }
                  });


          } else {
            //表单校验失败
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

</script>

<style>
 
</style>